<template>
  <div
    id="main"
    style="width: 800px; height: 400px; display: inline-block"
  ></div>
</template>

<script setup>
import { getReportsApi } from '@/api/reports'
import { onMounted } from 'vue'
import * as echarts from 'echarts'

// import { onMounted } from 'vue'

const initReports = async () => {
  let res = await getReportsApi()
  console.log(res.data)

  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option = {}

  option = res.data

  option && myChart.setOption(option)
}

onMounted(() => {
  initReports()
})
</script>

<style lang="scss" scoped></style>
